{% extends "base.html" %}

{% block content %}
<div class="hero-section text-center">
    <div class="container">
        <h1 class="display-4 fw-bold">🤖 AI英语学习助手</h1>
        <p class="lead">基于华为云AI技术的智能英语学习平台</p>
        <p>个性化教学 · 实时纠错 · 情景对话 · 智能辅导</p>
        <a href="{{ url_for('chat') }}" class="btn btn-light btn-lg mt-3">
            <i class="fas fa-comments"></i> 开始学习
        </a>
    </div>
</div>

<div class="row g-3">  <!-- 减少间距 -->
    <div class="col-xl-3 col-lg-6 col-md-6">  <!-- 更细致的响应式控制 -->
        <div class="card feature-card h-100 border-0 shadow-sm">  <!-- 更轻的阴影 -->
            <div class="card-body text-center d-flex flex-column p-3">  <!-- 减少内边距 -->
                <i class="fas fa-comments fa-2x text-primary mb-2"></i>  <!-- 缩小图标 -->
                <h6 class="card-title fw-bold">智能对话</h6>  <!-- 使用h6和加粗 -->
                <p class="card-text flex-grow-1 small">与AI英语老师实时对话，提升口语表达能力。</p>  <!-- 缩小文字 -->
                <a href="{{ url_for('chat') }}" class="btn btn-outline-primary btn-sm mt-auto">开始对话</a>  <!-- 小按钮 -->
            </div>
        </div>
    </div>
    
    <div class="col-xl-3 col-lg-6 col-md-6">
        <div class="card feature-card h-100 border-0 shadow-sm">
            <div class="card-body text-center d-flex flex-column p-3">
                <i class="fas fa-spell-check fa-2x text-success mb-2"></i>
                <h6 class="card-title fw-bold">语法纠错</h6>
                <p class="card-text flex-grow-1 small">实时检查英语语法错误，提供详细解释。</p>
                <a href="{{ url_for('grammar_correction') }}" class="btn btn-outline-success btn-sm mt-auto">检查语法</a>
            </div>
        </div>
    </div>
    
    <div class="col-xl-3 col-lg-6 col-md-6">
        <div class="card feature-card h-100 border-0 shadow-sm">
            <div class="card-body text-center d-flex flex-column p-3">
                <i class="fas fa-book fa-2x text-info mb-2"></i>
                <h6 class="card-title fw-bold">词汇学习</h6>
                <p class="card-text flex-grow-1 small">深入学习单词含义、用法，扩展词汇量。</p>
                <a href="{{ url_for('vocabulary_learning') }}" class="btn btn-outline-info btn-sm mt-auto">学习词汇</a>
            </div>
        </div>
    </div>
    
    <div class="col-xl-3 col-lg-6 col-md-6">
        <div class="card feature-card h-100 border-0 shadow-sm">
            <div class="card-body text-center d-flex flex-column p-3">
                <i class="fas fa-theater-masks fa-2x text-danger mb-2"></i>
                <h6 class="card-title fw-bold">情景对话</h6>
                <p class="card-text flex-grow-1 small">模拟真实生活场景，练习实用对话技巧。</p>
                <a href="{{ url_for('conversation_practice') }}" class="btn btn-outline-danger btn-sm mt-auto">开始对话</a>
            </div>
        </div>
    </div>
</div>

<div class="row mt-4">  <!-- 减少上边距 -->
    <div class="col-12">
        <div class="card border-0 shadow-sm">  <!-- 统一卡片样式 -->
            <div class="card-header bg-primary text-white">
                <h5 class="mb-0"><i class="fas fa-lightbulb"></i> 学习建议</h5>  <!-- 使用h5 -->
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <h6>🎯 学习目标</h6>
                        <ul class="small mb-0">  <!-- 缩小文字 -->
                            <li>每天坚持练习15-30分钟</li>
                            <li>重点突破薄弱环节</li>
                            <li>结合实际场景应用</li>
                            <li>定期复习已学内容</li>
                        </ul>
                    </div>
                    <div class="col-md-6">
                        <h6>💡 使用技巧</h6>
                        <ul class="small mb-0">
                            <li>大胆开口，不怕犯错</li>
                            <li>多使用新学词汇</li>
                            <li>注意AI老师的反馈</li>
                            <li>记录学习进度</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}